<template>
  <div class="hello">
		<h3>我是子组件</h3>
		<p>父组件传给我的标题是:---{{title}}---</p>
		<div style="background-color: pink;padding: 20px;">
			<h4>这一块以下内容是插槽</h4>
			<slot name='top'> 这就是默认值1</slot>
		</div>
		<div class="content" style="background-color: goldenrod;">
			<h4>这是子组件内容区域</h4>
			<ul>
				<li>
					<p>R:{{red}}</p>
					<button @click="changeRGB('red')">red++</button>
				</li>
				<li>
					<p>G:{{green}}</p>
					<button @click="changeRGB('green')">green++</button>
				</li>
				<li>
					<p>B:{{blue}}</p>
					<button @click="changeRGB('blue')">blue++</button>
				</li>
			</ul>
		</div>
		<div style="background-color: gainsboro;padding: 10px;">
			<h4>这一块以下内容是作用域插槽改变文字颜色</h4>
			<slot name='bottom' :aaaa='color' bbb='5555' cccc='6666'>
				<p :style="{color}">我这里没用插槽于是展示了默认值</p>
			</slot>
		</div>
		
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
	props:['title'],
	data(){
		return {
			red:0,
			green:0,
			blue:0
		}
	},
	computed:{
		color(){
			return `rgb(${this.red},${this.green},${this.blue})`
		}
	},
	watch:{
		color(val){
			this.$emit('changeColor',val)
		}
	},
	methods:{
		changeRGB(key){
			if(this[key]>=255){
				this[key] = 255
				return 
			}
			this[key]+=5
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
	border: 1px solid #fff;
	background-color: #999;
	padding:10px 40px;
}
.content {
	padding: 20px;	
}
.content ul{
	list-style: none;
	display: flex;
}
.content ul li{
	margin:0 20px;
}
</style>
